<template>
  <div id="person_center" class="flex-x-y-center">
    <div class="box flex-x-y-center">
      <div class="row">
        <div class="left">英文名:</div>
        <div class="right">{{ userObj.username }}</div>
      </div>
      <!-- <div class="row">
          <div class="left">密码:</div>
          <div class="right">
            <el-input v-model="userObj.password"></el-input>
          </div>
        </div> -->
      <div class="row">
        <div class="left">邮箱:</div>
        <div class="right">
          <el-input
            v-model="userObj.email"
            placeholder="后期将开放邮件相关订阅功能，敬请期待"
            disabled
          ></el-input>
        </div>
      </div>
      <div class="row">
        <div class="left">楼层:</div>
        <div class="right">
          <el-radio-group v-model="userObj.level">
            <el-radio label="31">三十一楼</el-radio>
            <el-radio label="30">三十楼</el-radio>
            <el-radio label="29">二十九楼</el-radio>
            <el-radio label="100">顶楼</el-radio>
          </el-radio-group>
          <span class="red">*</span>
        </div>
      </div>
      <div class="row flex-x-y-center">
        <el-button type="primary" style="width: 120px" @click="save"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { updateUser } from "@/api/api";
export default {
  data() {
    return {
      userObj: {
        email: "",
        level: "",
      },
    };
  },
  mounted() {
    this.userObj = {...this.$store.state.food.userObj};
    this.userObj.email =
      !this.userObj.email || this.userObj.email == "null"
        ? ""
        : this.userObj.email;
  },
  beforeRouteLeave(to, form, next) {
    console.log("tag", next);
    try {
      if (!this.$store.state.food.userObj.level && to.path != "/login") {
        this.$message("请先完善楼层信息");
        return;
      } else {
        next();
      }
    } catch (error) {
      location.reload();
    }
  },
  methods: {
    save() {
      if (this.userObj.level == 100) {
        this.$message("顶楼风很大，老板说了不送！");
        return;
      }
      if (!this.userObj.level) {
        this.$message("请先完善楼层信息");
        return;
      }
      updateUser(this.userObj).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "成功修改！",
          });
          let token = res.data["token"];
          localStorage.setItem("token", token);
          this.$store.dispatch("food/getUserObj").then((res) => {});
        } else {
          this.$message.error("修改失败！");
        }
      });
    },
  },
};
</script>
<style lang="stylus">
#person_center {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url('../../assets/login_bg.svg');

  .red {
    color: red;
    font-size: 20px;
    position: relative;
    top: 5px;
    left: 5px;
  }

  .el-input__inner {
    width: 300px;
  }

  .el-card {
    width: 60%;
  }

  .el-radio {
    margin-right: 20px;
  }

  .el-radio__label {
    padding-left: 5px;
  }

  .box {
    flex-direction: column;
    width: 60%;
    min-width: 570px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 15px 15px;
  }

  .row {
    width: 100%;
    // height: 50px;
    padding: 15px;
    display: flex;

    >div {
      height: 50px;
      line-height: 50px;
    }

    .left {
      flex-basis: 100px;
      text-align: right;
    }

    .right {
      flex: 1;
      padding-left: 10px;
    }
  }
}
</style>